<template>
  <div class="allgoods">
    <div class="goods-list banxin">
      <Breadcrumb :arr="arrList"></Breadcrumb>
      <div class="banner-bd">
        <Banner :src="ad"></Banner>
      </div>
      <div class="check">
        <div class="paixu">
          排序：<span
            v-for="item in pxList"
            :key="item.id"
            @click="getPxList(item)"
            :class="{ active: pxId === item.id }"
            >{{ item.name }}</span
          >
        </div>
        <div class="cate">
          分类：<span
            v-for="item in cateList"
            :key="item.id"
            @click="getCateList(item)"
            :class="{ active: cateId === item.id }"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <GoodsList :arr="goodsList"></GoodsList>
      <div class="loading" v-show="isLoading"><span class="iconfont icon-loading"  alt="" /></div>
      <div class="tishi" v-show="currentPage >= pagesList.length">
        <p>没有更多数据了</p>
      </div>
    </div>
  </div>
</template>
 
<script>
import Banner from "../components/home/banner.vue";
import ad from "../assets/images/home/ad.png";
import GoodsList from "../components/home/GoodsList.vue";
import { AllGoodsApi } from "../http/api";
import Breadcrumb from "../components/common/Breadcrumb.vue";
import { toast } from "../components/common/toast.vue";
export default {
  data() {
    return {
      arrList: [
        { path: "/home", text: "主页" },
        { path: "", text: "全部商品", isLast: true },
      ],
      ad,
      goodsList: [],
      pxId: 0,
      cateId: 0,
      pxMin: 0,
      pxMax: 0,
      cateType: 0,
      pxList: [
        { id: 1, name: "全部", min: 0, max: 0 },
        { id: 2, name: "我能兑换的", min: 0, max: 0 },
        { id: 3, name: "0-500个", min: 0, max: 500 },
        { id: 4, name: "500-1000个", min: 500, max: 1000 },
        { id: 5, name: "1000-1500个", min: 1000, max: 1500 },
        { id: 6, name: "1500-2500个", min: 1500, max: 2500 },
        { id: 7, name: "2500-6500个", min: 2500, max: 6500 },
        { id: 8, name: "6500-10000个", min: 6500, max: 10000 },
      ],
      cateList: [
        { id: 10, name: "全部", type: 0 },
        { id: 11, name: "实体商品", type: 1 },
        { id: 12, name: "虚拟商品", type: 2 },
      ],
      pagesList: [],
      currentPage: 1,
      isLoading:false
    };
  },
  components: {
    Banner,
    GoodsList,
    Breadcrumb,
  },
  created() {
    this.getAllGoods();
  },
  methods: {
    getPxList(item) {
      if (item.id === 2) {
        if (this.$store.state.userinfo.coin !== undefined) {
          this.pxList[1].max = this.$store.state.userinfo.coin;
        } else {
          toast("请先登录", "warning");
          this.$store.state.isShowLogin = true;
        }
      }
      this.pxId = item.id;
      this.pxMin = item.min;
      this.pxMax = item.max;
      console.log(this.pxId);
      this.getAllGoods();
    },
    getCateList(item) {
      this.cateId = item.id;
      this.cateType = item.type;
      this.getAllGoods();
    },

    async getAllGoods() {
      const params = {
        did: this.$route.query.did || 0,
        min: this.pxMin,
        max: this.pxMax,
        type: this.cateType,
        keyword: this.$route.query.keyword || "",
      };
      const { data } = await AllGoodsApi(params);
      console.log(data);
      // this.goodsList = data;
      // 定义一页显示几条数据
      const size = 8;
      // 一共分几页
      const pages = Math.ceil(data.length / size);
      // 把数据数据分为几份添加
      for (let i = 1; i <= pages; i++) {
        this.pagesList[i] = data.slice((i - 1) * size, i * size);
      }
      console.log(this.pagesList);
      // 显示第一页的数据
      this.goodsList.push(...this.pagesList[this.currentPage]);
    },
  },
  // 不是vue的方法都写在mounted里面
  mounted() {
    window.onscroll = () => {
      // 当滚动到底部的时候，加载下一页
      // 滚动出去的距离
      const outH =
        document.documentElement.scrollTop || document.body.scrollTop;
        // 可视区域的高度
      const vh =
        document.documentElement.clientHeight || document.body.clientHeight;
        // 内容的实际高度
      const ph =
        document.documentElement.offsetHeight || document.body.offsetHeight;
      // console.log(outH, vh, ph);
      // 当滚动出去的距离+可视区域的高度大于等于实际高度，就加在下一页
      if (outH + vh >= ph) {
        // console.log(this.currentPage);
        this.currentPage++;
        // 当数据加载完之后就跳出，当前页不再++
        if(this.currentPage>=this.pagesList.length) return 
        this.isLoading=true;
        // 滚动到底部的时候，过一会再加载数据
        setTimeout(() => {
          if (this.currentPage < this.pagesList.length) {
            this.goodsList.push(...this.pagesList[this.currentPage]);
          }
          this.isLoading=false
        }, 800);
      }
    };
  },
  beforeDestroy() {
    // 销毁的时候，把不是vue的方法解绑
    window.onscroll = null;
  },
  // 解决二次搜索无效的问题
  watch: {
    "$route.query.keyword": {
      handler() {
        this.getAllGoods();
        // 当前页
        // this.$router.go(0);
      },
      deep: true,
    },
  },
};
</script>
 
<style lang = "less" scoped>
.allgoods {
  background-color: #f5f5f5;
  padding: 20px 0;
  .banner-bd {
    padding-top: 20px;
  }
  .check {
    margin: 20px 0;
    font-size: 16px;
    span {
      cursor: pointer;
      color: #999;
      padding: 0 10px;
      line-height: 40px;
      &.active {
        color: #0a328e;
      }
    }
  }
  .tishi,.loading {
    width: 100%;
    text-align: center;
  }
  .icon-loading {
    display: inline-block;
    width: 18px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    animation: loading 1s infinite linear;
  }
  @keyframes loading {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(360deg);
    }
  }
}
</style>
